<template>
    <div>
        <a-drawer
            title=""
            width="420"
            :open="open"
            :closable="false"
            @close="onclose"
            :body-style="settingBody"
            class="setting">
            <div class="header">
                <div class="headerText">设置</div>
                <img class="settingHeaderLine" src="../assets/version2.0/settingHeaderLine.png" alt="">
            </div>
            <div class="button1">
                <a-button class="buttonSize" @click="openLinkStorePage">
                    <img class="buttonImg" src="../assets/version2.0/settingRoot.png" alt="">
                    <span class="text">关联店铺</span>
                </a-button>
                <a-button class="buttonSize" @click="openWifi">
                    <img class="buttonImg" src="../assets/version2.0/settingWifi.png" alt="">
                    <span class="text">WIFI设置</span>
                </a-button>
                <a-button class="buttonSize" @click="openUsersFile">
                    <img class="buttonImg" src="../assets/version2.0/settingUsers.png" alt="">
                    <span class="text">用户健康档案</span>
                </a-button>
            </div>
            <div class="button2">
                <a-button class="buttonSize" @click="openDeviceInfoModal">
                    <img class="buttonImg" src="../assets/version2.0/settingStorage.png" alt="">
                    <span class="text">设备信息</span>
                </a-button>
                <a-button class="buttonSize" @click="changeRootPassword">
                    <img class="buttonImg" src="../assets/version2.0/settingRoot.png" alt="">
                    <span class="text">本机密码</span>
                </a-button>
                <a-button class="buttonSize" @click="shutdownModal">
                    <img class="buttonImg" src="../assets/version2.0/settingShutdown.png" alt="">
                    <span class="text" style="color: white">关机</span>
                </a-button>
            </div>
        </a-drawer>
    </div>
    <link-store ref="linkStore"></link-store>
    <wifi-list ref="wifiList"></wifi-list>
    <users-file ref="userFile"></users-file>
    <device-info ref="deviceInfo"></device-info>
    <shutdown-confirm-modal ref="shutdownModal"></shutdown-confirm-modal>
    <update-password ref="updatePassword"></update-password>
</template>

<script>

import LinkStore from "@/components/LinkStore.vue";
import WifiList from "@/components/wifiList.vue";
import UsersFile from "@/components/usersFile.vue";
import DeviceInfo from "@/components/deviceInfo.vue";
import ShutdownConfirmModal from "@/components/shutdownConfirmModal.vue";
import * as echarts from "echarts";
import store from "@/store";
import UpdatePassword from "@/components/updatePassword.vue";

export default {
    name: "settingPage",
    components: {UpdatePassword, ShutdownConfirmModal, DeviceInfo, UsersFile, WifiList, LinkStore},
    data() {
        return {
            open:false,
            settingBody: {
                'padding': '8px 0px',
                'justify-content': 'center',
            },
        }
    },
    methods: {
        openLinkStorePage(){
            this.$refs.linkStore.open = true
            this.$refs.linkStore.account = store.state.storeName
        },
        openWifi(){
            this.$refs.wifiList.open = true
        },
        openUsersFile(){
            this.$refs.userFile.open = true
            this.$refs.userFile.getUserList()
        },
        openDeviceInfoModal(){
            this.$refs.deviceInfo.open = true
            // this.$refs.deviceInfo.initPie()
            //这个方法是当页面的标签加载出来以后才渲染图表，否则拿不到标签
            this.$nextTick(() => {
                let disk = echarts.init(this.$refs.deviceInfo.$refs.disk)
                let ram = echarts.init(this.$refs.deviceInfo.$refs.ram)
                let deviceInfo = this.$refs.deviceInfo
                let allCapacity = store.state.allCapacity
                let usedCapacity = store.state.usedCapacity
                let noUsedCapacity = allCapacity - usedCapacity
                let ramSize = store.state.ramSize
                let ramUsage = store.state.ramUsage
                let ramUsedSize = parseFloat(((ramUsage*ramSize)/100).toFixed(1))
                // 指定图表的配置项和数据
                let ramOption = {
                    title: {
                        text: '内存使用情况',
                        left:'left',
                        textStyle:{
                            fontSize:'16px',
                            fontWeight:'300',
                            color:'#fff'
                        },
                        backgroundColor:'#15baff',
                        padding: [6,18],
                        borderRadius:20
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            // mark: { show: true },
                            // dataView: { show: true, readOnly: false },
                            // restore: { show: true },
                            // saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            //第一个参数为内圆半径，第二个参数为外圆半径；百分比表示相当于父容器
                            radius: ['43%', '50%'],
                            //表示圆心的位置
                            center: ['200px', '50%'],
                            //南丁格尔玫瑰图，有两个参数，area和radius
                            // roseType: 'radius',
                            //图形样式
                            itemStyle: {
                                //每一个图的圆角大小，给number表示同时设置四个，给数组表示分别设置
                                borderRadius: 8
                            },
                            label:{
                                overflow:'breakAll'
                            },
                            labelLine: {
                                //是否显示连接线
                                show: true,
                                length:6
                            },
                            //数据源
                            data: [
                                {value: 100-ramUsage,name: '未使用-'+(ramSize-ramUsedSize).toFixed(2)+'G'},
                                {value: ramUsage, name: '已使用-'+ramUsedSize+'G'},
                            ]
                        }
                    ]
                };
                let diskOption = {
                    title: {
                        text: '磁盘使用情况',
                        left:'left',
                        textStyle:{
                            fontSize:'16px',
                            fontWeight:'300',
                            color:'#fff'
                        },
                        backgroundColor:'#15baff',
                        padding: [6,18],
                        borderRadius:20
                    },
                    legend: {
                        top: 'bottom'
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            // mark: { show: true },
                            // dataView: { show: true, readOnly: false },
                            // restore: { show: true },
                            // saveAsImage: { show: true }
                        }
                    },
                    series: [
                        {
                            name: 'Nightingale Chart',
                            type: 'pie',
                            //第一个参数为内圆半径，第二个参数为外圆半径；百分比表示相当于父容器
                            radius: ['43%', '50%'],
                            //表示圆心的位置
                            center: ['200px', '50%'],
                            //南丁格尔玫瑰图，有两个参数，area和radius
                            // roseType: 'radius',
                            //图形样式
                            itemStyle: {
                                //每一个图的圆角大小，给number表示同时设置四个，给数组表示分别设置
                                borderRadius: 8
                            },
                            label:{
                                overflow:'breakAll'
                            },
                            labelLine: {
                                //是否显示连接线
                                show: true,
                                length:6
                            },
                            //数据源
                            data: [
                                {value: noUsedCapacity,name: '未使用-'+(allCapacity-usedCapacity)+'G'},
                                {value: usedCapacity, name: '已使用'+-usedCapacity+'G'},
                            ]
                        }
                    ]
                      }
                // 使用刚指定的配置项和数据显示图表。
                disk.setOption(diskOption);
                ram.setOption(ramOption);

            })
        },
        shutdownModal(){
            this.$refs.shutdownModal.open = true
        },
        onclose(){
            this.open = false
        },
        changeRootPassword(){
            this.$refs.updatePassword.openUpdatePassword = true
        },
    }
}
</script>

<style scoped>
.header{
    justify-content: center;
    margin-bottom: 20px;
}
.headerText{
    display: flex;
    justify-content: center;
    font-size: 18px;
    font-weight: bold;
}
.settingHeaderLine{
    width: 420px;
    height: auto;
}

.button1{
    display: flex;
    gap: 36px;
    margin-left: 10px;
    margin-top: 10px;
}

.buttonSize{
    position: relative;
    width: 108px;
    height: 108px;
    padding: 0 0 0 0;
    border-style: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.buttonImg{
    width: auto;
    height: 108px;
}

.button2{
    display: flex;
    gap: 36px;
    margin-left: 10px;
    margin-top: 20px;
}
.text{
    position: absolute;
    font-size: 16px;
    font-weight: bold;
    bottom: 10px;
}
</style>